import React, { useState, useCallback } from 'react'
// useCallback的作用: 可以缓存函数,减少函数创建次数.返回值就是缓存的那个函数
export default function App() {
  const [c, setC] = useState(0)
  // 问题: handle函数只需要创建一次,但是现在handle函数会创建很多次
  // function handle() {
  //   setC(c + 1)
  // }
  // 利用useCallback解决问题
  // 注意:
  // 1. 如果useCallback第二个参数不写,则useCallback还是会重新创建handle函数
  // 2. 如果useCallback第二个参数写了空数组,则useCallback会帮我们缓存handle函数,只创建一次handle
  // 3. 如果useCallback第二个参数写了数组,并且数组中监听了数据,则useCallback会帮我们缓存handle函数.但是当监听的数据发生变化,则重新创建handle.当别的数据发生,则handle不会重新创建
  const handle = useCallback(
    function () {
      // setC((c) => {
      //   return c + 1
      // })
      setC(c + 1)
    },
    [c]
  )
  return (
    <div>
      App
      <p>{c}</p>
      <button onClick={handle}>+</button>
    </div>
  )
}
